<template>
    <Row :gutter="30">
        <Card style="margin:0 0 20px 0px">
            <Row class="form-row">
                <Form label-position="right" :model="filters" :label-width="90" inline>
                    <p style="font-size: 24px">{{filters.housingName}} - {{filters.routeName}}</p>
                </Form>
            </Row>
            <Row class="form-row">
                <img :src="url"/>
            </Row>
            <Row class="form-row">
                <div>开始巡更时间：{{filters.patrolStart}}</div>
                <div>结束巡更时间：{{filters.patrolEnd}}</div>
            </Row>
            <el-table stripe border :data="tableData" size="large" ref="table">
                <template slot="empty">暂无数据</template>
                <el-table-column prop="userName" label="巡逻人"></el-table-column>
                <el-table-column prop="addressName" label="地点"></el-table-column>
                <el-table-column prop="coordinate" label="经纬度"></el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <p v-if="scope.row.status == 0" style="color:red">暂未巡更</p>
                        <p v-if="scope.row.status == 1" style="color:red">异常</p>
                        <p v-if="scope.row.status == 2" style="color:green">正常</p>
                    </template>
                </el-table-column>
                <el-table-column prop="picUrl" label="图片" >
                    <template slot-scope="scope">
                        <span :id="'images-' + scope.row.id" style="display: flex; flex-direction: row; width: 100%; height: 45px;">
                            <img @click="HandleImg('images-' + scope.row.id)" v-for="u in scope.row.picUrls" :src="u" style="margin-right: 5px; width: auto; height: 100%">
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="巡逻时间"></el-table-column>
                <el-table-column prop="description" label="说明"></el-table-column>
            </el-table>
            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Card>

        <!--&lt;!&ndash;巡更图片&ndash;&gt;-->
        <!--<Modal v-model="formCode" title="巡更图片" class="modal-content" width="450" :mask-closable="false">-->
            <!--<div style="width: 430px; height: 430px; margin: 0 auto">-->
                <!--<img :src="url" style="width: 420px;height: 430px"/>-->
            <!--</div>-->
            <!--<div slot="footer">-->
                <!--<Button type="primary" size="large" @click="cancelCode">确定</Button>-->
            <!--</div>-->
        <!--</Modal>-->
    </Row>
</template>
<script>
    import Viewer from 'viewerjs'
    require('viewerjs/dist/viewer.css')

    export default {
        data() {
            return {
                houseList: [],
                routeList: [],
                addressList: [],
                //新增修改弹窗标题
                modalTitle: '新增',
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                formVisible: false,
                modal: {},
                filters: {},
                //表单提交状态
                formLoading: false,
                formCode: false,
                url: "",
                tableData: [],
            };
        },

        created: function () {
            this.getParams();
        },
        methods: {
            getParams() {
                // 取到路由带过来的参数
                this.filters.recordId = this.$route.query.recordId;
                this.filters.housingId = this.$route.query.housingId;
                this.filters.housingName = this.$route.query.housingName;
                this.filters.route = this.$route.query.route;
                this.filters.routeName = this.$route.query.routeName;
                this.filters.patrolStart = this.$route.query.patrolStart;
                this.filters.patrolEnd = this.$route.query.patrolEnd;
                this.loadData();
            },
            //加载地图
            infoLoadMap() {
                let params = {};
                params.record = this.filters.recordId;
                params.route = this.filters.route;
                params.housingId = this.filters.housingId;
                this.postRequest("/api/patrol/infoLoadMap", params).then(res => {
                    if (res.code == 20000) {
                        this.url = res.data;
                    } else {
                        this.url = res.data;
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                })
            },
            //加载数据
            loadData() {
                let params = this.filters;
                params.record = this.filters.recordId
                params.route = this.filters.route
                params.pageNum = this.pageNum;
                params.pageSize = this.pageSize;
                //与后台交换数据
                this.postRequest("/api/patrol/infoLoadData", params).then(res => {
                    if (res.code == 20000) {
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                        this.infoLoadMap();
                    } else {
                        this.tableData = [];
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //查看图片
            HandleImg(id) {
                // this.url = picUrl;
                // this.formCode = true;
                new Viewer(document.getElementById(id));
            },
            //查看图片弹窗确定按钮
            cancelCode() {
                this.formCode = false
            },
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
        }
    };
</script>
